<template>
  <div class="travel-reduce">
    <search-header :title="reportsTitle" @on-search="search"></search-header>
    <div class="content">
      <span class="tab-left">节支统计</span>
      <div class="fix">
        <div class="fl statisticsType">
          <table class="table-reduce" cellspacing="1" border="0">
            <tr class="thead">
              <th width="120"></th>
              <th width="200" class="td-left">统计类型</th>
              <th width="120" class="td-right">金额（元）</th>
              <th width="120">详情</th>
            </tr>
            <tr v-for="(item,idx) in reduceData">
              <td rowspan="3" v-if="idx == 0">已省金额<br/>（{{calcTotal('reduce')}}）</td>
              <td class="td-left">{{item.name}}</td>
              <td class="td-right">{{(item.reduceMoney/100).toFixed(2)}}</td>
              <td><i class="iconfont icon-chakanxiangqing" @click="showDetail('reduce',item.type)"></i></td>
            </tr>
            <tr v-for="(item,idx) in canReduceData">
              <td v-if="idx == 0">可省空间<br/>（{{calcTotal('canReduce')}}）</td>
              <td class="td-left">{{item.name}}</td>
              <td class="td-right">{{(item.reduceMoney/100).toFixed(2)}}</td>
              <td><i class="iconfont icon-chakanxiangqing" @click="showDetail('reduce',item.type)"></i></td>
            </tr>
          </table>
        </div>
        <div class="fl chart">
          <div id="chart-reduce" :style="{width:'500px',height:'320px'}"></div>
        </div>
      </div>
    </div>
    <div class="content content-next">
      <span class="tab-left"><div class="barL"></div>节支统计 > <i> 已省金额-协议酒店</i></span>
      <div>
        <Table width="100%" stripe class="tabTop" :columns="orderTypeColumnsww" :data="orderTypeColumnswww"></Table>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts';
  import SearchHeader from '@/components/bi/search-header.vue';
  import bi from '@/data/bi.js';

  export default {
    name: 'bi-reduce',
    components: {SearchHeader},
    data(){
      return {
        reportsTitle: '差旅节支分析',
        reduceData: [],//节省金额
        canReduceData: [],//可省空间
        monthData: [],
        chartReduce:null,
        orderTypeColumnsww: [
          {
            title: '预定时间',
            width: 160,
            key: 'a',
            align: 'left'
          },
          {
            title: '预定人',
            key: 'b',
            width: 120,
            align: 'left'
          },
          {
            title: '订单摘要',
            key: 'c',
            align: 'left'
          },
          {
            title: '原始房价总额',
            key: 'd',
            width: 140,
            align: 'right'
          },
          {
            title: '协议价格总额',
            key: 'e',
            width: 120,
            align: 'right'
          },
          {
            title: '节省费用',
            key: 'f',
            width: 120,
            align: 'right'
          },
          {
            title: '查看订单详情',
            key: 'g',
            width: 120,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('i', {
                  'class': 'iconfont icon-chakanxiangqing'
                })
              ]);
            }
          }
        ],
        orderTypeColumnswww:[
          {
            a:'2018-12-12 12:09',
            b:'wangxiaomao',
            c:'将会是多久啊都很深刻的还是分手就是倒计时就是的好地方',
            d:'¥1400',
            e:'¥1200',
            f:'¥200',
            g:'icon'
          },
          {
            a:'2018-09-09 12:00'
          },
          {
            a:'2018-09-09 12:00'
          },
          {
            a:'2018-09-09 12:00'
          },
          {
            a:'2018-09-09 12:00'
          }
        ]
      };
    },
    mounted(){
      this.chartReduce = echarts.init(document.getElementById('chart-reduce'));
    },
    methods: {
      search(params){
        var date = params.searchDate || new Date();
        this.chartReduce && this.chartReduce.showLoading();
        bi.getReduceData({
          orgId: params.orgId,
          year: date.getFullYear(),
          month: date.getMonth() + 1
        }).then(res => {
          this.chartReduce && this.chartReduce.hideLoading();
          if (res.code == '0') {
            this.initData(res.data);
          } else {
            this.$Message.error('查询错误。' + (res.msg || res.code || ''));
          }
        });
      },
      initData(data){
        this.reduceData = data.reduceData || [];
        this.canReduceData = data.canReduceData || [];
        this.monthData = data.monthData || [];
      },
      initChart(){
        var showMonth = [];
        var reduceMoney = [];
        var canReduceMoney = [];
        this.monthData.forEach(md => {
          showMonth.push(md.month);
          reduceMoney.push((md.reduceMoney || 0)/100);
          canReduceMoney.push((md.canReduceMoney || 0)/100);
        });
        if(showMonth.length < 1){
          this.$Message.error('结果日期错误');
            return;
        }

        var option = {
          title: {
            text: '',
            textStyle: {
              color: '#666',
              fontWeight: '500',
              fontSize: '16px'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['已省金额', '可省空间']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: showMonth,
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#666',
                width: '1px'
              }
            },
          },
          yAxis: {
            show: false
          },
          series: [
            {
              name: '已省金额',
              type: 'bar',
              barWidth: 35,
              stack: '总量',
              data: reduceMoney,
              itemStyle: {
                normal: {
                  color: '#74b2f1'
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            },
            {
              name: '可省空间',
              type: 'bar',
              stack: '总量',
              data: canReduceMoney,
              itemStyle: {
                normal: {
                  color: '#a9d769'
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            }
          ]
        };
        this.chartReduce.setOption(option);
      },
      calcTotal(key){
        var arr = key == 'reduce' ? this.reduceData : this.canReduceData;
        var total = 0;
        arr.forEach(ar => {
          if (ar.reduceMoney) {
            total += ar.reduceMoney;
          }
        });
        return (total / 100).toFixed(2);
      },
      showDetail(type,key){
        this.$Message.info('待开发');
      }
    },
    watch:{
      monthData(){
        this.initChart();
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  body{
    background-color: #f4f4f4!important;
  }
  .tabTop {
      border: none;
    .ivu-table:after {
      content: '';
      width: 0px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #dddee1;
      z-index: 3;
    }
    .ivu-table:before {
      content: '';
      width: 100%;
      height: 0px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #dddee1;
      z-index: 1;
    }
    th{
      background-color: #d6e7ff !important;
      font-weight: bold;
    }
    .ivu-table .tabTitle {
      background-color: #EB7A77;
      /*color: #3385ff;*/
    }
    .ivu-table-cell{
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .ivu-table td, .ivu-table th{
      border-bottom: none;
    }
    .icon-chakanxiangqing{
      font-size: 22px;
      color: #666666;
    }
    .icon-chakanxiangqing:hover{
      color: #3385ff;
      cursor: pointer;
    }
  }

</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .travel-reduce {
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: #f4f4f4;
  }

  .content {
    margin-top: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    .tab-left {
      line-height: 35px;
      font-size: 14px;
      font-weight: bold;
      display: block;
      border-bottom: 1px solid #dddee1;
      margin-bottom: 20px;
    }
    .statisticsType {
      width: calc(50% - 60px);
      .table-reduce {
        width: 100%;
        background-color: #e9eaec;
        color: #333333;
        td {
          background-color: #FFFFFF;
          height: 56px;
          text-align: center;
          vertical-align: middle;
          font-size: 13px;
          .icon-chakanxiangqing {
            font-size: 26px;
            color: #333333;
            cursor: pointer;
          }
          i.icon-chakanxiangqing:hover {
            color: #3385ff;
          }
        }
        .td-left{
          text-align: left;
          padding-left: 20px;
        }
        .td-right{
          text-align: right;
          padding-right: 20px;
        }
        tr.thead {
          background-color: #d6e7ff;
          line-height: 56px;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    .chart {
      width: calc(50% - 60px);
      min-width: 500px;
      #chart-reduce{
        margin:0 auto;
      }
    }
  }
  .content-next{
    .tab-left {
      font-weight: normal;
      .barL{
        margin-right: 6px;
        margin-top: 7px;
        width: 3px;
        height: 20px;
        float: left;
        background-color: #3385ff;
      }
      i{
        color: #3385ff;
      }
    }
  }
</style>
